<template>
  <div class="resource-manage">


    <div class="clearfix f12">
      <div class="fr">
        <div>储存空间2G，已用1G，<a class="link-warning" href="#">购买储存</a></div>
        <!-- <div class="mt10">储存空间2GG，已用10G，<a  class="link-warning" href="#">购买储存</a></div> -->
      </div>
    </div>

     <Tabs :value="tab1">
        <TabPane label="我的资源" name="name1">
           <div class="clearfix">
            <div class="fl">
              <Select v-model="select1" style="width:200px">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              <Icon type="ios-trash c4" size="24" @click="deleteConfirm" />
            </div>
            <div class="fr">
              <Button type="warning" @click="modal1=true">文件上传</Button>
            </div>
          </div>

        <div class="mt10">
          <Table border ref="selection" :columns="columns1" :data="data1">
            <template slot-scope="{ row, index }" slot="action">
              <Icon type="ios-create c5" size="20" title="编辑"/>
              <Icon type="md-download c1" size="20" title="下载" @click="repaire(row)"/>
              <Icon type="ios-share c6"  size="20" title="分享"/>
              <Icon type="ios-folder-open c4" size="20"  title="共享"/>
            </template>
          </Table>
        </div>
        
        <div class="page mt20">
          <Page :total="100" show-sizer />
        </div>
        </TabPane>
        <TabPane label="共享资源" name="name2">
           <div class="clearfix">
            <div class="fl">
              <Select v-model="select1" style="width:200px">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              <Icon type="ios-trash c4" size="24" @click="deleteConfirm" />
            </div>
            <div class="fr">
              <Button type="warning" @click="modal1=true">文件上传</Button>
            </div>
          </div>

        <div class="mt10">
          <Table border ref="selection" :columns="columns1" :data="data1">
            <template slot-scope="{ row, index }" slot="action">
              <Icon type="md-download c1" size="20" title="下载" @click="repaire(row)"/>
              <Icon type="ios-paper c6"  size="20" title="查看"/>
            </template>
          </Table>
        </div>
        
        <div class="page mt20">
          <Page :total="100" show-sizer />
        </div>
        </TabPane>
     </Tabs>

    
    
    <!-- dialog -->
    <Modal v-model="modal1" width="400" title="上传文件">
      <div>
        <Upload
        multiple
        type="drag"
        action="//jsonplaceholder.typicode.com/posts/">
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或拖拽上传文件</p>
        </div>
    </Upload>
        <p class="mt10">
          文件名称：
          <Input type="text" style="width:300px;" />
        </p>
        <p class="mt10">
          文件描述：
          <Input type="textarea" style="width:300px;"/>
        </p>
      </div>
      <div slot="footer" class="text-center">
        <Button type="primary" >确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        select1: '1',
        modal1: false,
        tab1: 'name1',
        position: [{
            title: '云服务',
            link: '/admin/cloudService'
          },
          {
            title: '资源管理'
          }
        ],
        columns1: [{
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '名称',
            key: 'id'
          },
          {
            title: '来源',
            key: 'address'
          },
          {
            title: '创建日期',
            key: 'address'
          },
          {
            title: '大小',
            key: 'address'
          },
          {
            title: '操作',
            slot: 'action',
            width: 200,
            align: 'center'
          },
        ],
        data1: [{
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },

        ],
        cityList: [
          {
            value: '1',
            label: '全部来源',
          },
          {
            value: '2',
            label: '上传',
          },
          {
            value: '3',
            label: '直播',
          },
          {
            value: '4',
            label: '互动',
          },
          {
            value: '5',
            label: '会议',
          },
          {
            value: '6',
            label: '前端设备',
          },
          
        ]
        }
      },
      mounted() {
          this.$store.commit('UPDATE_POSITION', this.position)
        },
        methods: {
          handleSelectAll(status) {
            this.$refs.selection.selectAll(status);
          }
        }
    }
</script>

<style lang="less" scoped>
</style>
